<template>
    <div class="foot">
        <input type="checkbox" :checked='isAll' @change="checkAll">
        <span>完成{{doneTotal}}/全部{{total}}</span>
        <button class="clear" @click="clearAll">清除已完成</button>
    </div>
</template>

<script>
export default {
    name:'NoteFooter',
    props:['todos','checkAllTodo','clear'],
    methods: {
            checkAll(e){
                this.checkAllTodo(e.target.checked)
            },
            clearAll(){
                this.clear();
            }
        },

    computed:{
        total(){
            return this.todos.length
        },
        
        doneTotal(){
            let i=0;
            this.todos.forEach((todo)=>{
                if(todo.done) i++
            })
            return i
        },
        isAll:{
            get(){
                return this.total===this.doneTotal && this.total > 0
            },
            set(newValue){
                this.checkAllTodo(newValue)
            }
        },
    },
    
}
</script>

<style scoped>
.foot {
    margin-top: 10px;
    position: relative;
    width: 500px;
    height: 35px;
}
.clear {
    position: absolute;
    right: 0;
}
</style>